iT邦幫忙

2023 iThome 鐵人賽

DAY 27
0
自我挑戰組

網頁學習30天系列 第 27

網頁學習30天 day27

  • 分享至 

  • xImage
  •  

上次我們使用了自定義模塊來寫helloworld,今天我將以計算機為模擬,使用自定義模塊來自定加減乘除,如果將全部寫在一起,結果將是這樣的:

function add(n1,n2) {
  return n1+n2
}

function sub(n1,n2) {
  return n1-n2
}

function mul(n1,n2) {
  return n1*n2
}

function div(n1,n2) {
  return n1/n2
}

let result = add(3,2)
console.log(`3 + 2 = ${result}`)

let result2 = sub(3,2)
console.log(`3 - 2 = ${result2}`)

let result3 = mul(3,2)
console.log(`3 * 2 = ${result3}`)

let result4 = div(4,2)
console.log(`4 / 2 = ${result4}`)

https://ithelp.ithome.com.tw/upload/images/20231012/20162857HcJ26HfsdO.png
接下來我們使用自定義模塊,我分成兩個文件,分別是cal.js以及test.js,cal負責處理加減乘除,再透過test.js來導入cal.js裡面的功能,首先是cal.js:

function add(n1,n2) {
    return n1+n2
  }
  
  function sub(n1,n2) {
    return n1-n2
  }
  
  function mul(n1,n2) {
    return n1*n2
  }
  
  function div(n1,n2) {
    return n1/n2
  }

  module.exports = {
    add,
    sub,
    mul,
    div,
  };

在這之中module.exports用來告訴那些函數需要被輸出,接下來是test.js:

const cal = require("./cal.js")

let result = cal.add(3,2)
console.log(`3 + 2 = ${result}`)

let result2 = cal.sub(3,2)
console.log(`3 - 2 = ${result2}`)

let result3 = cal.mul(3,2)
console.log(`3 * 2 = ${result3}`)

let result4 = cal.div(4,2)
console.log(`4 / 2 = ${result4}`)

首先先導入cal.js,接著後面一樣,但特別注意let result = cal.add(3,2)在add前面有個cal,我當初忘記因此導致程式出錯,這樣就能獲得一樣的結果但是更好管理:
https://ithelp.ithome.com.tw/upload/images/20231012/20162857kJu91fk8lc.png


上一篇
網路學習30天 day26
下一篇
網頁學習30天 day28
系列文
網頁學習30天30
圖片
  直播研討會
圖片
{{ item.channelVendor }} {{ item.webinarstarted }} |
{{ formatDate(item.duration) }}
直播中

尚未有邦友留言

立即登入留言